<template>
	<div>
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>订单号</th>
					<th>VIP名称</th>
					<th>购买用户</th>
					<th>类型</th>
					<th>价格</th>
					<th>支付状态</th>
					<th>支付时间</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in orderData" :key="index">
					<td>{{item.order_id}}</td>
					<td>{{item.title}}</td>
					<td>{{item.nickname}}</td>
					<td>{{item.type}}</td>
					<td>{{item.price}}</td>
					<td>{{item.pay_status}}</td>
					<td>{{item.pay_time}}</td>
					<td>
						<a-button type="primary" @click="openInfo(item)">查看详情</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<a-drawer title="详情" placement="right" width="380" :visible="infoVisible" @close="infoVisible=false">
			<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
				<a-form-item label="状态">
					<a-tag v-if="infoData.status==0" color="blue">已到期</a-tag>
					<a-tag v-else-if="infoData.status==1" color="green">正常（{{infoData.end_time}}到期）</a-tag>
					<a-tag v-else color="#f50">未知状态</a-tag>
				</a-form-item>
				<a-form-item label="姓名">
					{{infoData.nickname}}
				</a-form-item>
				<a-form-item label="订单号">
					{{infoData.order_id}}
				</a-form-item>
				<a-form-item label="VIP名称">
					{{infoData.title}}
				</a-form-item>
				<a-form-item label="类型">
					<span v-if="infoData.type=='ziyuan'">资源VIP</span>
					<span v-else-if="infoData.type=='kecheng'">课程VIP</span>
				</a-form-item>
				<a-form-item label="价格">
					{{infoData.price}}
				</a-form-item>
				<a-form-item label="支付状态">
					<span v-if="infoData.pay_status==1" style="color: #87d068;">已支付</span>
					<span v-else style="color: #f50;">未支付</span>
				</a-form-item>
				<a-form-item label="支付时间">
					{{infoData.pay_time}}
				</a-form-item>
				<a-form-item label="订单时间">
					{{infoData.create_time}}
				</a-form-item>
			</a-form>
		</a-drawer>
		
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="pageSize" :current="page" :total="count" @change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
	</div>
</template>

<script>
	import apiUser from '../../api/user'
	export default {
		data() {
			return {
				orderData:'',
				// 分页
				pageSizeOptions: ['30', '50', '100', '150'],
				count: '',
				page: 1,
				pageSize: 20,
				
				infoVisible: false,
				infoData:''
			}
		},
		mounted() {
			this.getOrderList()
		},
		methods: {
			getOrderList() {
				apiUser.getVipOrderList(this.page, this.pageSize).then((res) => {
					this.orderData = res.result.data;
					this.count = res.result.count
					this.page = res.result.page
					this.pageSize = res.result.pageSize
				})
			},
			
			// 打开详情
			openInfo(item){
				this.infoData = item
				this.infoVisible = true
			},
			
			// 分页
			clickPage(e) {
				this.page = e;
				this.getOrderList();
			},
			onShowSizeChange(current, pageSize) {
				this.pageSize = pageSize;
				this.page = 1;
				this.getOrderList();
			}
		}
	}
</script>

<style>
</style>